import React, { Component } from 'react';
import { Layout, Row, Col, Icon, Rate } from 'antd';
import './App.css';
import header from './static/header.jpg';
const { Sider, Content } = Layout;
const aboutMeText = `逻辑思维清晰，能高效描述用户流程和产品逻辑； 
      热爱分享交流，习惯团队工作，能够与不同性格的人共事； 
      热爱学习，有强烈的学习欲望，能保持自省和沉淀的习惯，保持开放的心态； 
      情感细腻敏锐，能从行为中识别和理解用户需求。`
const jsLevel = ['了解','熟悉','掌握','精通','资深'];

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      jsValue: 1,
      file: [],
      imgLink: './static/header.jpg',
      mapStar: [{title: '掌握技能', icon: 'tool', jsValue: 1},
                {title: '沟通能力', icon: 'alert', jsValue: 2},
                {title: '框架熟练度', icon: 'dashboard', jsValue: 1},
                {title: '团队协作', icon: 'team', jsValue: 4}]
    }
  }
  changeHeaderImg (e) { // 取消时file为undefined
    let file = e.target.files[0];
    let reader = new FileReader();
    if (file !== undefined) {
      var url = reader.readAsDataURL(file);
      console.log(url)
    }
    reader.onloadend = () => {
      this.setState({
        imgSrc: [reader.result]
      })
    }
  }
  handleChangeStar (item, val) {
    item.jsValue = val
    let newMapStar = this.state.mapStar.map((opt, index) => {
      if (opt.title === item.title && opt.icon === item.icon) {
        return {
          ...opt
        }
      } else {
        return {
          ...opt
        }
      }
    })
    this.setState({
      mapStar: newMapStar
    })
  };
  render() {
    return (
      <div className="App">
          <Layout className="layout">
            <Sider className="sider" width={224}>
              <Row className="sider-row">
                <Col style={{ position: 'relative' }}>
                  <input type="file" ref="file" accept="image/*" name="user[image]" className="changeHeader" onChange={this.changeHeaderImg.bind(this)}/>
                  <img src={this.state.imgSrc || header} className="header-img" alt="头像"/>
                </Col>
                <Col>
                  <Icon type="qq" />
                  <div contenteditable="true">747896298</div>
                </Col>
                <Col>
                  <Icon type="wechat" />
                  <div contenteditable="true">yamu08</div>
                </Col>
                <Col>
                  <Icon type="mail" />
                  <div contenteditable="true">747896298@qq.com</div>
                </Col>
                <Col>
                  <Icon type="phone" />
                  <div contenteditable="true">13888888888</div>
                </Col>
                <Col style={{ marginTop: '30px' }}>
                  <Icon type="user" />
                  <div contenteditable="true">关于我</div>
                  <div className="aboutMe" contenteditable="true">{aboutMeText}</div>
                </Col>
              </Row>
              <Row className="sider-row-bottom" style={{ marginTop: '30px', paddingBottom: '80px' }}>
                  {this.state.mapStar.map((item, index) => {
                    return (
                      <Row key={index}>
                        <Col className="col-header">
                          <Icon type={item.icon} />
                          <div contenteditable="true">{item.title}</div>
                        </Col>
                        <Col className="col-star">
                          <span>
                            <Rate tooltips={jsLevel}
                                  className="star"
                                  onChange={this.handleChangeStar.bind(this, item)}
                                  value={item.jsValue}/>
                                  {item.jsValue ? <span className="ant-rate-text">{jsLevel[item.jsValue - 1]}</span> : ''}
                          </span>
                        </Col>
                      </Row>
                    )
                  })}
              </Row>
              <div className="kkk"></div>
            </Sider>
            <Content  className="content">Content</Content>
          </Layout>
      </div>
    );
  }
}

export default App;
